<template>
    <div class="main-container" id="main-container">
        <div style="background: #fff; height: 100%" id="workshopCancelStocks">
            <PageTabelLayout>
                <template #pageHeader>
                    <div class="my-header" style="padding: 10px;box-sizing: border-box;" v-if="headerShow">
                        <a-form size="small" :model="searchData" auto-label-width layout="inline">
                            <a-form-item label="客户名称">
                                <a-input class="bacClass" style="width:200px" allow-clear v-model="searchData.customName" />
                            </a-form-item>
                            <a-form-item label="计划单号">
                                <a-input class="bacClass" style="width:200px" allow-clear
                                    v-model="searchData.planOrderCode" />
                            </a-form-item>
                            <!-- <a-col :xxl="6" :xl="12" :lg="12" :md="12" :xs="24">
                                    <a-form-item label="开单日期">
                                        <a-range-picker  popup-container="html"  class="aInput" allow-clear @change="changePicker" />
                                    </a-form-item>
                                </a-col> -->
                            <!-- <a-col :xxl="6" :xl="12" :lg="12" :md="12" :xs="24">
                                    <a-form-item label="设备编号">
                                        <a-input class="aInput" allow-clear  v-model="searchData.cwFlowCardCode"/>
                                    </a-form-item>
                                </a-col> -->
                            <a-form-item label="回修流转卡号">
                                <a-input class="bacClass" style="width:200px" allow-clear
                                    v-model="searchData.cwFlowCardCode" />
                            </a-form-item>
                            <!-- <a-row :gutter="16">
                            </a-row> -->
                        </a-form>
                    </div>
                    <div class="my-divisders">
                        <a-divider orientation="center">
                            <icon-double-up v-if="headerShow" @click="changHeadShow(false)" :strokeWidth="2" :size="18" />
                            <icon-double-down v-else @click="changHeadShow(true)" :strokeWidth="2" :size="18" />
                        </a-divider>
                    </div>
                    <div class="my-tool-bar" style="margin-bottom: 10px;">
                        <Toolbar :items="['查询', '回修', '导出']" @select="selectHandler" @repair="addRepairHandler"
                            @export="exportHandler" />
                    </div>
                </template>
                <template #pageTabel>
                    <div style="height:100%;">
                        <a-spin :loading="pageData.pageLoading" tip="加载中" dot style="height:99%;width: 100%;z-index:999 ;">
                            <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true"
                                rowSelection="multiple" @grid-ready="gridReady" style="height:100%" class='ag-theme-alpine'
                                :defaultColDef="defaultColDef" :rowData="table.dataList" :columnDefs="cfsValue"
                                :localeText="localeTextData" @columnResized="onColumnResized"
                                @columnMoved="onColumnMoved" />
                        </a-spin>
                    </div>
                </template>
                <paginationCopys :page-size-options="pagingList1" :total="total" show-total show-jumper show-page-size
                    @change="changePage" @page-size-change="changeSize" style="justify-content: center;margin-top: 10px;"
                    :page-size="pagination.pageSize" :current="pagination.page" />
            </PageTabelLayout>
        </div>
        <a-drawer :drawer-style="{ zIndex: 9999 }" height="100%" unmountOnClose :visible="pageData.showAdd"
            :mask-closable="false" placement="bottom" @cancel="pageData.showAdd = false">
            <template #title>{{ pageData.sideTitle }}</template>
            <a-form ref="formRef" style="margin-top:20px" layout="inline" auto-label-width :model="dataForm" size="small"
                :label-col-props="{ span: 10 }" :wrapper-col-props="{ span: 14 }">
                <a-form-item label-col-flex="110px" label="回修流转卡号" field="cwFlowCardCode"
                    :rules="[{ required: true, message: '流转卡号必填' }]" :validate-trigger="['change', 'blur']">
                    <a-input allow-clear class="bacClass" style="width: 219px;" v-model="dataForm.cwFlowCardCode"
                        :disabled="pageData.isCheck" />
                </a-form-item>
                <a-form-item label-col-flex="110px" label="流转卡号" field="flowCardCode"
                    :rules="[{ required: true, message: '流转卡号必填' }]" :validate-trigger="['change', 'blur']">
                    <a-select popup-container="html"  style="width: 247px;" class="bacClass" v-model="dataForm.flowCardCode" allow-clear
                        allow-search @search="searchHandler($event, 1)" @focus="selectAwait(1)" @change="changFlowCode"
                        :loading="pageData.departLoading" :disabled="pageData.isCheck">
                        <a-option v-for="item in pageData.circulDropList" :key="item.id" :value="item.flowCardCode">{{
                            item.flowCardCode }}</a-option>
                    </a-select>
                </a-form-item>
                <a-form-item label-col-flex="110px" label="开单日期" field="createOrderDate"
                    :rules="[{ required: true, message: '开单日期必填' }]" :validate-trigger="['change', 'blur']">
                    <a-date-picker  popup-container="html"  v-model="dataForm.createOrderDate" show-time allow-clear style="width: 247px;"
                        class="bacClass" :disabled="pageData.isCheck" />
                </a-form-item>
                <a-form-item label-col-flex="110px" label="计划单号" field="planOrderCode"
                    :rules="[{ required: true, message: '计划单号必填' }]" :validate-trigger="['change', 'blur']">
                    <a-input allow-clear style="width: 247px;" class="bacClass" v-model="dataForm.planOrderCode"
                        :disabled="pageData.isCheck" />
                </a-form-item>
                <a-form-item label-col-flex="110px" label="色称" field="colorName" :rules="[{ message: '色称必填' }]"
                    :validate-trigger="['change', 'blur']">
                    <!-- <a-input allow-clear disabled style="width: 270px;" v-model="dataForm.colorName" /> -->
                    <a-input allow-clear style="width: 287px;" class="bacClass" v-model="dataForm.colorName"
                        :disabled="pageData.isCheck" />
                </a-form-item>
                <a-form-item label-col-flex="110px" label="品名" field="colorName" :rules="[{ message: '品名必填' }]"
                    :validate-trigger="['change', 'blur']">
                    <!-- <a-input allow-clear disabled style="width: 270px;" v-model="dataForm.productName" /> -->
                    <a-input allow-clear style="width: 287px;" class="bacClass" v-model="dataForm.productName"
                        :disabled="pageData.isCheck" />
                </a-form-item>
                <a-form-item label-col-flex="110px" label="色号" field="colorCode" :rules="[{ message: '色号必填' }]"
                    :validate-trigger="['change', 'blur']">
                    <!-- <a-input allow-clear disabled style="width: 270px;" v-model="dataForm.colorCode" /> -->
                    <a-input allow-clear style="width: 287px;" class="bacClass" v-model="dataForm.colorCode"
                        :disabled="pageData.isCheck" />
                </a-form-item>
                <a-form-item label-col-flex="110px" label="原总重量" ield="flowCardWeight" :rules="[{ message: '原总重量必填' }]"
                    :validate-trigger="['change', 'blur']">
                    <!-- <a-input-number allow-clear disabled style="width: 270px;" v-model="dataForm.flowCardWeight" /> -->
                    <a-input-number allow-clear style="width: 259px;" class="bacClass" v-model="dataForm.flowCardWeight"
                        :disabled="pageData.isCheck" />
                </a-form-item>
                <a-form-item label-col-flex="110px" label="原总匹数">
                    <!-- <a-input-number allow-clear disabled style="width: 270px;" v-model="dataForm.houseNum" /> -->
                    <a-input-number allow-clear style="width: 259px;" class="bacClass" v-model="dataForm.houseNum"
                        :disabled="pageData.isCheck" />
                </a-form-item>
                <a-form-item label-col-flex="110px" label="客户名称">
                    <!-- <a-input allow-clear disabled style="width: 270px;" v-model="dataForm.customName" /> -->
                    <a-input allow-clear style="width: 259px;" class="bacClass" v-model="dataForm.customName"
                        :disabled="pageData.isCheck" />
                </a-form-item>
                <a-form-item label-col-flex="110px" label="回修原因" field="repairReason" :rules="[{ message: '回修原因必填' }]"
                    :validate-trigger="['change', 'blur']">
                    <a-select popup-container="html"  style="width: 259px;" class="bacClass" v-model="dataForm.repairReason" allow-clear
                        allow-search @search="searchHandler($event, 2)" @focus="selectAwait(2)"
                        :disabled="pageData.isCheck">
                        <a-option v-for="item in pageData.causeList" :key="item.id" :value="item.repairCause">{{
                            item.repairCause }}</a-option>
                    </a-select>
                </a-form-item>
                <a-form-item label-col-flex="110px" label="回修性质" field="wcMent" :rules="[{ message: '回修性质必填' }]"
                    :validate-trigger="['change', 'blur']">
                    <a-select popup-container="html"  style="width: 259px;" class="bacClass" v-model="dataForm.wcMent" allow-clear allow-search
                        @search="searchHandler($event, 3)" @focus="selectAwait(3)" :loading="pageData.departLoading"
                        :disabled="pageData.isCheck">
                        <a-option v-for="item in pageData.natureList" :key="item.id" :value="item.repairNature">{{
                            item.repairNature }}</a-option>
                    </a-select>
                </a-form-item>
                <a-form-item label-col-flex="110px" label="是否进缸" field="cylinder" :rules="[{ message: '是否进缸必填' }]"
                    :validate-trigger="['change', 'blur']">
                    <a-select popup-container="html"  style="width: 259px;" class="bacClass" v-model="dataForm.cylinder" allow-clear allow-search
                        @search="searchHandler($event, 4)" @focus="selectAwait(4)" :loading="pageData.departLoading"
                        :disabled="pageData.isCheck">
                        <a-option v-for="item in pageData.whetherList" :key="item.id" :value="item.whetherCylinder">{{
                            item.whetherCylinder }}</a-option>
                    </a-select>
                </a-form-item>
                <a-form-item label-col-flex="110px" label="回修工序" field="wcProcess" :rules="[{ message: '回修工序必填' }]"
                    :validate-trigger="['change', 'blur']">
                    <a-select popup-container="html"  style="width: 259px;" class="bacClass" v-model="dataForm.wcProcess" allow-clear allow-search
                        @search="searchHandler($event, 5)" @focus="selectAwait(5)" :loading="pageData.departLoading"
                        :disabled="pageData.isCheck">
                        <a-option v-for="item in pageData.wordFieldList" :key="item.id" :value="item.processName">{{
                            item.processName }}</a-option>
                    </a-select>
                </a-form-item>
                <a-form-item label-col-flex="110px" label="回修类型" field="wcType" :rules="[{ message: '回修类型必填' }]"
                    :validate-trigger="['change', 'blur']">
                    <a-select popup-container="html"  style="width: 259px;" class="bacClass" v-model="dataForm.wcType" allow-clear allow-search
                        @search="searchHandler($event, 6)" @focus="selectAwait(6)" :loading="pageData.departLoading"
                        :disabled="pageData.isCheck">
                        <a-option v-for="item in pageData.repairsTypeList" :key="item.id" :value="item.repairType">{{
                            item.repairType }}</a-option>
                    </a-select>
                </a-form-item>
                <a-form-item label-col-flex="110px" label="毛坯车间" field="workshop" :rules="[{ message: '毛坯车间必填' }]"
                    :validate-trigger="['change', 'blur']">
                    <a-input allow-clear style="width:259px" class="bacClass" v-model="dataForm.workshop"
                        :disabled="pageData.isCheck" />
                </a-form-item>
                <a-form-item label-col-flex="110px" label="退货部门" field="goodsDep" :rules="[{ message: '退货部门必填' }]"
                    :validate-trigger="['change', 'blur']">
                    <a-cascader class="bacClass" style="width:259px" v-model="dataForm.goodsDep"
                        :options="pageData.departList" allow-clear title="退货部门" @focus="selectAwait(7)"
                        :loading="pageData.departLoading" @change="chagneGoodsDep" ref="goodsDep"
                        :disabled="pageData.isCheck" popup-container="html"/>
                    <!-- :class="{ 'bacClass': !(dataForm.needCompany == null || dataForm.needCompany == '') }" -->
                    <!-- :disabled="dataForm.useCompany == null || dataForm.useCompany == ''" -->
                </a-form-item>
                <a-form-item label-col-flex="110px" label="回修车间" field="wcFarm" :rules="[{ message: '回修车间必填' }]"
                    :validate-trigger="['change', 'blur']">
                    <a-cascader class="bacClass" style="width:259px" v-model="dataForm.wcFarm"
                        :options="pageData.departList" allow-clear ref="wcFarm" @change="changeWcFarm" title="回修车间"
                        @focus="selectAwait(7)" :loading="pageData.departLoading" :disabled="pageData.isCheck" popup-container="html"/>
                    <!-- :class="{ 'bacClass': !(dataForm.needCompany == null || dataForm.needCompany == '') }" -->
                    <!-- :disabled="dataForm.useCompany == null || dataForm.useCompany == ''" -->
                </a-form-item>
                <a-form-item label-col-flex="110px" label="责任部门">
                    <a-cascader class="bacClass" style="width:259px" v-model="dataForm.dutyDep"
                        :options="pageData.departList" allow-clear ref="dutyDep" title="责任部门" @focus="selectAwait(7)"
                        @change="changeDutyDep" :loading="pageData.departLoading" :disabled="pageData.isCheck" popup-container="html"/>
                    <!-- :class="{ 'bacClass': !(dataForm.needCompany == null || dataForm.needCompany == '') }" -->
                    <!-- :disabled="dataForm.useCompany == null || dataForm.useCompany == ''" -->
                </a-form-item>
                <a-form-item label-col-flex="110px" label="备注">
                    <a-input allow-clear style="width:287px" class="bacClass" v-model="dataForm.remarks"
                        :disabled="pageData.isCheck" />
                </a-form-item>
            </a-form>
            <el-button type="success" :icon="iconText.CirclePlus" @click="dataForm.noticeDetailed.push({ ...noticeItem })"
                style="background:#67c23a ;margin-bottom: 10px;" v-if="!pageData.isCheck">新增</el-button>
            <a-table size="small" :columns="repairsColumns" :pagination="false" :data="dataForm.noticeDetailed">
                <template #flowCardCode="{ rowIndex }">
                    <!-- <a-input type="text" class="aInput"  /> -->
                    <a-select popup-container="html"  class="bacClass" v-model="dataForm.noticeDetailed[rowIndex].flowCardCode" allow-clear
                        allow-search @search="searchHandler($event, 1)" @focus="selectAwait(1)" @change="changFlowCode"
                        :loading="pageData.departLoading" :disabled="pageData.isCheck">
                        <a-option v-for="item in pageData.circulDropList" :key="item.id" :value="item.flowCardCode">{{
                            item.flowCardCode }}</a-option>
                    </a-select>
                </template>
                <template #greyCodec="{ rowIndex }">
                    <a-input type="text" class="bacClass" v-model="dataForm.noticeDetailed[rowIndex].greyCodec"
                        :disabled="pageData.isCheck" />
                </template>
                <template #productName="{ rowIndex }">
                    <a-input type="text" class="bacClass" v-model="dataForm.noticeDetailed[rowIndex].productName"
                        :disabled="pageData.isCheck" />
                </template>
                <template #yarnCount="{ rowIndex }">
                    <a-input type="text" class="bacClass" v-model="dataForm.noticeDetailed[rowIndex].yarnCount"
                        :disabled="pageData.isCheck" />
                </template>
                <template #colorCode="{ rowIndex }">
                    <a-input type="text" class="bacClass" v-model="dataForm.noticeDetailed[rowIndex].colorCode"
                        :disabled="pageData.isCheck" />
                </template>
                <template #colorName="{ rowIndex }">
                    <a-input type="text" class="bacClass" v-model="dataForm.noticeDetailed[rowIndex].colorName"
                        :disabled="pageData.isCheck" />
                </template>
                <template #inch="{ rowIndex }">
                    <a-input type="text" class="bacClass" v-model="dataForm.noticeDetailed[rowIndex].inch"
                        :disabled="pageData.isCheck" />
                </template>
                <template #upperLimit="{ rowIndex }">
                    <a-input type="text" class="bacClass" v-model="dataForm.noticeDetailed[rowIndex].upperLimit"
                        :disabled="pageData.isCheck" />
                </template>
                <template #lowerLimit="{ rowIndex }">
                    <a-input type="text" class="bacClass" v-model="dataForm.noticeDetailed[rowIndex].lowerLimit"
                        :disabled="pageData.isCheck" />
                </template>
                <template #gramWeight="{ rowIndex }">
                    <a-input-number :min="0" class="bacClass" v-model="dataForm.noticeDetailed[rowIndex].gramWeight"
                        :disabled="pageData.isCheck" />
                </template>
                <template #flowCardWeight="{ rowIndex }">
                    <a-input-number :min="0" class="bacClass" v-model="dataForm.noticeDetailed[rowIndex].flowCardWeight"
                        :disabled="pageData.isCheck" />
                </template>
                <template #houseNum="{ rowIndex }">
                    <a-input-number :min="0" class="bacClass" v-model="dataForm.noticeDetailed[rowIndex].houseNum"
                        :disabled="pageData.isCheck" />
                </template>
                <template #canUseWeight="{ rowIndex }">
                    <a-input-number :min="0" class="bacClass" v-model="dataForm.noticeDetailed[rowIndex].canUseWeight"
                        :disabled="pageData.isCheck" />
                </template>
                <template #canUseHouseNum="{ rowIndex }">
                    <a-input-number :min="0" class="bacClass" v-model="dataForm.noticeDetailed[rowIndex].canUseHouseNum"
                        :disabled="pageData.isCheck" />
                </template>
                <template #unit="{ rowIndex }">
                    <a-input class="bacClass" v-model="dataForm.noticeDetailed[rowIndex].unit"
                        :disabled="pageData.isCheck" />
                </template>
                <template #remark="{ rowIndex }">
                    <a-input class="bacClass" v-model="dataForm.noticeDetailed[rowIndex].remark"
                        :disabled="pageData.isCheck" />
                </template>
                <template #greyCodem="{ rowIndex }">
                    <a-input class="bacClass" v-model="dataForm.noticeDetailed[rowIndex].greyCodem"
                        :disabled="pageData.isCheck" />
                </template>
                <template #greyName="{ rowIndex }">
                    <a-input class="bacClass" v-model="dataForm.noticeDetailed[rowIndex].greyName"
                        :disabled="pageData.isCheck" />
                </template>
                <template #action="{ rowIndex }" v-if="dataForm.noticeDetailed.length > 1">
                    <el-button v-if="!pageData.isCheck" type="danger" @click="dataForm.noticeDetailed.splice(rowIndex, 1)"
                        link>删除</el-button>
                </template>
            </a-table>
            <div style="display: flex;justify-content: space-between;margin: 10px 0px 10px;">
                <a-tag size="large" color="#168cff">扣款</a-tag>
                <!-- <el-button type="success" icon="Plus" @click="dataForm.deduction.push({ ...ductItem })">新增</el-button> -->
                <el-button type="success" :icon="iconText.CirclePlus" @click="dataForm.deduction.push({ ...ductItem })"
                    style="background:#67c23a;" v-if="!pageData.isCheck">新增</el-button>
            </div>
            <a-table size="small" :columns="deductionColumns" :pagination="false" :data="dataForm.deduction">
                <template #staffCode="{ rowIndex }">
                    <a-input class="bacClass" v-model="dataForm.deduction[rowIndex].staffCode"
                        :disabled="pageData.isCheck" />
                </template>
                <template #staffName="{ rowIndex }">
                    <a-input class="bacClass" v-model="dataForm.deduction[rowIndex].staffName"
                        :disabled="pageData.isCheck" />
                </template>
                <template #deductionMoney="{ rowIndex }">
                    <a-input-number :precision="2" :min="0" class="bacClass"
                        v-model="dataForm.deduction[rowIndex].deductionMoney" :disabled="pageData.isCheck" />
                </template>
                <template #remark="{ rowIndex }">
                    <a-input class="bacClass" v-model="dataForm.deduction[rowIndex].remark" :disabled="pageData.isCheck" />
                </template>
                <template #action="{ rowIndex }" v-if="dataForm.deduction.length > 1">
                    <el-button v-if="!pageData.isCheck" type="danger" @click="dataForm.deduction.splice(rowIndex, 1)"
                        link>删除</el-button>
                </template>
            </a-table>
            <template #footer>
                <a-button @click="pageData.showAdd = false">
                    关闭
                </a-button>
                <a-button type="primary" @click="saveHandler" v-if="!pageData.isCheck">
                    保存
                </a-button>
            </template>
        </a-drawer>
    </div>
</template>
 
<script lang="ts">
import { pagingList } from "@/api/paging";
import PageTabelLayout from '@/components/pageTabelLayout.vue';
import { ref, onMounted, reactive } from 'vue';
import emitter from "@/hooks/useEventBus";
import { useTableColumn } from '@/hooks/table'
import { selectDataFn } from '@/api/DyeingshopManagement/getOrderFn'
import { orderFn } from '@/api/laboratory/other';
import { FormInstance, Message } from '@arco-design/web-vue';
import { RepairsInterface } from '@/interface/repairsNoticeInterface';

import { localeText } from '@/api/aggridZw'
import { assTable } from '@/utils/assemblyLevelTable';
import { usePagination, useTable } from '@/hooks/table';
import { notice } from '@/api/DyeingshopManagement/repairsNotice';
import dayjs from 'dayjs';
import { slicing } from '@/utils/caseFrimAndSecRig'
import {
    CirclePlus
} from '@element-plus/icons-vue'
import { saveOrUpdateGridState as saveOrUpdateGridState01 } from '@/hooks/useGridState'

export default {
    setup() {
        const noticeApi = notice();
        const headerShow = ref<boolean>(true);
        // let CirclePlus2 = CirclePlus;
        let iconText: any = {
            CirclePlus
        };
        const changePicker = (date: any) => {
            console.log(date);
        }
        const searchData = reactive<{
            cwFlowCardCode: string,
            planOrderCode: string,
            customName: string,
        }>({ cwFlowCardCode: '', planOrderCode: "", customName: '' });
        const noticeItem = {
            flowCardCode: "",
            greyCodec: "",
            productName: "",
            yarnCount: "",
            colorCode: "",
            colorName: "",
            inch: "",
            upperLimit: "",
            lowerLimit: "",
            gramWeight: 0,
            canUseWeight: 0,
            canUseHouseNum: 0,
            flowCardWeight: 0,
            houseNum: 0,
            unit: "",
            greyCodem: "",
            greyName: "",
            remark: ""
        };
        const ductItem = {
            staffCode: "",
            staffName: "",
            deductionMoney: 0,
            remark: ""
        }
        const dataForm = reactive<RepairsInterface>({
            id: null,
            cwFlowCardCode: "",
            flowCardCode: "",
            wcType: "",
            createOrderDate: dayjs(Date.now()).format('YYYY-MM-DD hh:mm:ss'),
            planOrderCode: "",
            customName: "",
            productName: "",
            colorCode: "",
            colorName: "",
            flowCardWeight: 0,
            houseNum: 0,
            workshop: "",
            repairReason: "",
            goodsDep: "",
            wcFarm: "",
            dutyDep: "",
            wcMent: "",
            cylinder: "",
            wcProcess: "",
            remarks: "",
            // deleteState: '',
            createName: '',
            createTime: '',
            updateName: '',
            updateTime: '',
            deduction: [{ ...ductItem }],
            noticeDetailed: [{ ...noticeItem }]
        });
        //下拉数据
        const options = ref<any>();
        const loading = ref(false);
        const searchHandler = async (value: any, index: number) => {
            if (value) {
                loading.value = true;
                await selectAwait(index, value, (data: any) => {
                    options.value = data;
                });

                loading.value = false;
            } else {
                options.value = [];
            }
        };
        const selectAwait = async (selectIndex: number, value: any = '', cb = (data: any) => { return data }) => {
            switch (selectIndex) {
                case 1:
                    //获取流转卡号下拉列表信息数据
                    pageData.departLoading = true;
                    await orderFn().getCirculDropList({ flowCardCode: '', }).then(res => {
                        if (res.code === 200) {
                            pageData.circulDropList = res.data;
                            cb(res.data);
                        } else {
                            Message.error({
                                content: "查询失败！",
                                duration: 5000,
                            });
                        }
                        pageData.departLoading = false;
                    });
                    break;
                case 2:
                    //查询回修原因
                    pageData.departLoading = true;
                    await selectDataFn().getRepairsCause({}).then(res => {
                        if (res.code === 200) {
                            pageData.causeList = res.data.data;
                            cb(res.data.data);
                        } else {
                            Message.error({
                                content: "查询失败！",
                                duration: 5000,
                            });
                        }
                        pageData.departLoading = false;
                    });
                    break;
                case 3:
                    //查询回修性质
                    pageData.departLoading = true;
                    await selectDataFn().getRepairsNature({}).then(res => {
                        if (res.code === 200) {
                            pageData.natureList = res.data.data;
                            cb(res.data.data);
                        } else {
                            Message.error({
                                content: "查询失败！",
                                duration: 5000,
                            });
                        }
                        pageData.departLoading = false;
                    });
                    break;
                case 4:
                    //查询是否进缸 
                    pageData.departLoading = true;
                    await selectDataFn().getIsWhether({ page: 1, limit: 10000, whetherCylinder: value }).then(res => {
                        if (res.code === 200) {
                            pageData.whetherList = res.data.data;
                            cb(res.data.data);
                        } else {
                            Message.error({
                                content: "查询失败！",
                                duration: 5000,
                            });
                        };
                        pageData.departLoading = false;
                    });
                    break;
                case 5:
                    //获取回修工序
                    pageData.departLoading = true;
                    await selectDataFn().getWordField({}).then(res => {
                        if (res.code === 200) {
                            pageData.wordFieldList = res.data;
                            cb(res.data);
                        } else {
                            Message.error({
                                content: "查询失败！",
                                duration: 5000,
                            });
                        }
                        pageData.departLoading = false;
                    });
                    break;
                case 6:
                    //获取回修类型
                    await selectDataFn().getRepairsType({}).then(res => {
                        if (res.code === 200) {
                            pageData.repairsTypeList = res.data.data;
                            cb(res.data.data);
                        } else {
                            Message.error({
                                content: "查询失败！",
                                duration: 5000,
                            });
                        }
                        pageData.departLoading = false;
                    });
                    break;
                case 7:
                    //获取回修车间
                    pageData.departLoading = true;
                    await selectDataFn().getTreeDepart({}).then(res => {
                        if (res.code === 200) {
                            pageData.departList = res.data;
                            cb(res.data);
                        } else {
                            Message.error({
                                content: "查询失败！",
                                duration: 5000,
                            });
                        }
                        pageData.departLoading = false;
                    });
                    break;
                // 
            }
        };
        let changHeadShow = (boolVal: boolean) => {
            headerShow.value = boolVal;
            emitter.emit('window-change');
        };
        let handlerState = ref<number>(1);
        onMounted(() => {
            // console.log(12342);
            selectHandler();
        });
        const selectHandler = () => {
            pagination.page = 1;
            doRefresh();
        };
        const formRef = ref<FormInstance>();
        const saveHandler = async () => {
            formRef.value?.validate().then(async (err) => {
                if (!err) {
                    if (dataForm.id) {
                        await noticeApi.editNotice({ ...dataForm }).then((res: any) => {
                            if (res.code === 200) {
                                formRef.value?.resetFields();
                                pageData.showAdd = false;
                                Message.success({
                                    content: "修改成功",
                                    duration: 5000,
                                });
                                doRefresh();
                            } else {
                                Message.error({
                                    content: res.message,
                                    duration: 2000
                                });
                            }
                        }).catch((res) => {
                            console.log(res);
                        });
                    }
                    else {
                        await noticeApi.addNotic({ ...dataForm }).then((res: any) => {
                            if (res.code === 200) {
                                formRef.value?.resetFields();
                                pageData.showAdd = false;
                                Message.success({
                                    content: "新增成功",
                                    duration: 5000,
                                });
                                doRefresh();
                            } else {
                                Message.error({
                                    content: res.message,
                                    duration: 2000
                                });
                            }
                        }).catch((res) => {
                            console.log(res);
                        });
                    }
                }
                else {
                    console.log(err);
                }
            });
        };
        const exportHandler = () => {
            let selectList = gridOption.value.getSelectedRows();
            // console.log(selectList);
            if (selectList.length === 0) {
                Message.error('请勾选需要导出的数据')
                return
            } else {
                //导出数据
                let nowRow = table.dataList.filter(function (o) {
                    return (gridOption.value.getSelectedRows().map((o: any) => { return o.id })).indexOf(o["id"]) !== -1;
                })
                assTable(cfsValue, nowRow, '回修通知单');
            }
        };
        const changHandler = (e: number | string) => {
            handlerState.value = +e;
            selectHandler();
        };
        const pageData = reactive<({
            pageLoading: boolean,
            showAdd: boolean,
            sideTitle: string,
            isCheck: boolean,
            departLoading: boolean,
            circulDropList: any[],
            causeList: any[],
            natureList: any[],
            whetherList: any[],
            wordFieldList: any[],
            repairsTypeList: any[],
            departList: any[],
        })>({
            pageLoading: false,
            showAdd: false,
            isCheck: false,
            departLoading: false,
            sideTitle: "回修",
            circulDropList: [],
            causeList: [],
            natureList: [],
            whetherList: [],
            wordFieldList: [],
            repairsTypeList: [],
            departList: []
        });
        const repairsColumns = useTableColumn([
            {
                title: "流转卡号",
                key: "flowCardCode",
                dataIndex: "flowCardCode",
                slotName: "flowCardCode",
                width: 150,
            },
            {
                title: "布号",
                key: "greyCodec",
                dataIndex: "greyCodec",
                slotName: "greyCodec",
                width: 150,
            },
            {
                title: "品名",
                key: "productName",
                dataIndex: "productName",
                slotName: "productName",
                width: 150,
            },
            {
                title: "纱支",
                key: "yarnCount",
                dataIndex: "yarnCount",
                slotName: "yarnCount",
                width: 150,
            },
            {
                title: "色号",
                key: "colorCode",
                dataIndex: "colorCode",
                slotName: "colorCode",
                width: 160,
            },
            {
                title: "色称",
                key: "colorName",
                dataIndex: "colorName",
                slotName: "colorName",
                width: 160,
            },
            {
                title: "尺寸",
                key: "inch",
                dataIndex: "inch",
                slotName: "inch",
                width: 150,
            },
            {
                title: "门幅上",
                key: "upperLimit",
                dataIndex: "upperLimit",
                slotName: "upperLimit",
                width: 150,
            },
            {
                title: "门幅下",
                key: "lowerLimit",
                dataIndex: "lowerLimit",
                slotName: "lowerLimit",
                width: 150,
            },
            {
                title: "克重",
                key: "gramWeight",
                dataIndex: "gramWeight",
                slotName: "gramWeight",
                width: 150,
            },
            {
                title: "重量",
                key: "flowCardWeight",
                dataIndex: "flowCardWeight",
                slotName: "flowCardWeight",
                width: 150,
            },
            {
                title: "匹数",
                key: "houseNum",
                dataIndex: "houseNum",
                slotName: "houseNum",
                width: 150,
            },
            {
                title: "原重量",
                key: "canUseWeight",
                dataIndex: "canUseWeight",
                slotName: "canUseWeight",
                width: 150,
            },
            {
                title: "原匹数",
                key: "canUseHouseNum",
                dataIndex: "canUseHouseNum",
                slotName: "canUseHouseNum",
                width: 150,
            },
            {
                title: "单位",
                key: "unit",
                dataIndex: "unit",
                slotName: "unit",
                width: 150,
            },
            {
                title: "备注",
                key: "remark",
                dataIndex: "remark",
                slotName: "remark",
                width: 150,
            },
            {
                title: "坯布编号",
                key: "greyCodem",
                dataIndex: "greyCodem",
                slotName: "greyCodem",
                width: 150,
            },
            {
                title: "坯布名称",
                key: "greyName",
                dataIndex: "greyName",
                slotName: "greyName",
                width: 150,
            },
            {
                title: "操作",
                key: "action",
                dataIndex: "action",
                slotName: "action",
                width: 150,
                fixed: "right",
            },
        ]);
        const deductionColumns = useTableColumn([
            {
                title: "员工编号",
                key: "staffCode",
                dataIndex: "staffCode",
                slotName: "staffCode",
                width: 150,
            },
            {
                title: "姓名",
                key: "staffName",
                dataIndex: "staffName",
                slotName: "staffName",
                width: 150,
            },
            {
                title: "扣款金额",
                key: "deductionMoney",
                dataIndex: "deductionMoney",
                slotName: "deductionMoney",
                width: 150,
            },
            {
                title: "备注",
                key: "remark",
                dataIndex: "remark",
                slotName: "remark",
                width: 150,
            },
            {
                title: "操作",
                key: "id",
                dataIndex: "id",
                slotName: "action",
                width: 150,
                fixed: "right",
            },
        ]);
        const table = useTable();
        const doRefresh = async () => {
            pageData.pageLoading = true;
            // updateGridState01()
            await noticeApi.getNoticeList({
                page: pagination.page,
                limit: pagination.pageSize,
            }, { ...searchData }).then(({ data, code }: any) => {
                //  console.log(data.list);
                if (code === 200) {
                    //     // gridOption.value.sizeColumnsToFit();
                    table.handleSuccess(data.data.list);
                    gridOption.value.setRowData(data.data.list);
                    total.value = data.data.total;
                }
            }).catch(console.log)
                .finally(() => {
                    pageData.pageLoading = false;
                });
        };
        const pagination = usePagination(doRefresh);
        //表格方面
        const gridOption = ref();
        const colState = ref()
        const gridReady = (params: any) => {
            gridOption.value = params.api;
            colState.value = params.columnApi
            //调整表格自适应大小
        }
        const defaultColDef = {
            sortable: true,
            resizable: true,
            filter: true,
            width: 150
        };

        const changFlowCode = async (flowCardCode: any) => {
            // console.log(code);
            if (flowCardCode) {
                await noticeApi.getFlowCardCodeDetail({ flowCardCode }).then(res => {
                    console.log(res);
                })
            }

        }
        const addRepairHandler = () => {
            pageData.showAdd = true;
            pageData.sideTitle = '新增回修';
            pageData.isCheck = false;
        }
        const hasDetail = async (data: any, status: string) => {
            let res = await noticeApi.getChildList({ id: data.id });
            if (res.code === 200) {
                if (status === 'edit') {
                    pageData.showAdd = true;
                    pageData.sideTitle = '修改回修';
                    pageData.isCheck = false;
                } else {
                    pageData.showAdd = true;
                    pageData.sideTitle = '回修明细'
                    pageData.isCheck = true;
                };
                let { mendNotice } = res.data;
                for (let key in mendNotice) {
                    if (key === 'listMendNoticeDeduction') {
                        for (let prop in mendNotice[key]) {
                            dataForm.deduction[prop] = mendNotice[key][prop]
                        }
                    }
                    if (key === 'listMendNoticeDetailed') {
                        for (let prop in mendNotice[key]) {
                            dataForm.noticeDetailed[prop] = mendNotice[key][prop]
                        }
                    };
                    if (key !== 'listMendNoticeDetailed' && key !== 'listMendNoticeDeduction') {
                        dataForm[key] = mendNotice[key];
                    }
                }
            }
        }
        let goodsDep = ref();
        const chagneGoodsDep = () => {
            setTimeout(() => {
                if (goodsDep.value.selectViewValue.length > 0) {
                    dataForm.goodsDep = slicing(goodsDep.value.selectViewValue[0]['label'])
                }
            }, 100)
        };

        let wcFarm = ref();
        const changeWcFarm = () => {
            setTimeout(() => {
                if (wcFarm.value.selectViewValue.length > 0) {
                    dataForm.wcFarm = slicing(wcFarm.value.selectViewValue[0]['label'])
                }
            }, 100)
        };

        let dutyDep = ref();
        const changeDutyDep = () => {
            setTimeout(() => {
                if (dutyDep.value.selectViewValue.length > 0) {
                    dataForm.dutyDep = slicing(dutyDep.value.selectViewValue[0]['label'])
                }
            }, 100)
        }

        const delHeader = (data: any) => {

        };
        let cfsValue: any = [
            // {
            //     headerName: "序号",
            //     field: "serialNo",
            // },
            {
                headerName: "回修流转卡",
                field: "cwFlowCardCode",
            },
            {
                headerName: "开单日期",
                field: "createOrderDate",
            },
            {
                headerName: "流转卡号",
                field: "flowCardCode",
            },
            {
                headerName: "回修车间",
                field: "wcFarm",
            },
            {
                headerName: "计划单号",
                field: "planOrderCode",
            },
            {
                headerName: "客户名称",
                field: "customName",
            },
            // {
            //     headerName: "布号",
            //     field: "closeCode",
            // },
            {
                headerName: "品名",
                field: "productName",
            },
            {
                headerName: "纱支",
                field: "yarnCount",
            },
            {
                headerName: "色号",
                field: "colorCode",
            },
            {
                headerName: "色称",
                field: "colorName",
            },
            {
                headerName: "门幅",
                field: "upperLimit",
            },
            {
                headerName: "克重",
                field: "gramWeight",
            },
            {
                headerName: "重量",
                field: "flowCardWeight",
            },
            {
                headerName: "匹数",
                field: "houseNum",
            },
            {
                headerName: "原重量",
                field: "canUseWeight",
            },
            {
                headerName: "原匹数",
                field: "canUseHouseNum",
            },
            {
                headerName: "单位",
                field: "unit",
            },
            {
                headerName: "备注",
                field: "remark",
            },
            {
                headerName: "坯布编号",
                field: "greyCodem",
            },
            {
                headerName: "回修性质",
                field: "wcMent",
            },
            {
                headerName: "退货部门",
                field: "goodsDep",
            },
            {
                headerName: "扣款日期",
                field: "deductionTime",
            },
            {
                headerName: "扣款金额",
                field: "deductionMoney",
            },
            // {
            //     headerName: "生产交期",
            //     field: "serialNo",
            // },
            {
                headerName: '操作',
                lockPosition: 'right',
                sortable: false,
                resizable: false,
                filter: false,
                width: 150,
                pinned: 'right',
                cellRenderer: {
                    template: `
                        <a-space>
                            <el-button style="color:#165dff;" link @click="a">修改</el-button>
                            <el-button style="color:#00d223;" link @click="b">明细</el-button>
                        </a-space>
                    `,
                    // <a-col :span="8">
                    //         <el-button type="danger" link @click="c">删除</el-button>
                    //      </a-col>
                    setup(props: any) {
                        const a = () => {
                            hasDetail(props.params.data, 'edit');
                        };
                        const b = () => {
                            hasDetail(props.params.data, 'detail');
                        };
                        const c = () => {
                            delHeader(props.params.data);
                        };
                        return {
                            a, b, c
                        }
                    }
                }
            },
        ];
        let a = [{
            showRowGroup: 'hide_def',
            "headerName": "",
            "checkboxSelection": true,
            "headerCheckboxSelection": true,
            "pinned": "left",
            "width": 50,
            resizable: false,
            filter: false,
            sortable: false,
            minWidth: 50,
            maxWidth: 50,
            lockPosition: "left",
        }]
        cfsValue = a.concat(cfsValue);
        const total = ref(10);
        const changePage = (val: any) => {
            pagination.page = val
            doRefresh();
        }
        const changeSize = (val: any) => {
            pagination.pageSize = val
            doRefresh();
        }

        const localeTextData: any = ref(localeText);
        const pagingList1: any = ref(pagingList)
        const { saveGridState: saveGridState01, updateGridState: updateGridState01 } = saveOrUpdateGridState01('repairsNotice02', gridOption, colState, cfsValue)
        const onColumnMoved = () => {
            saveGridState01()
        }
        const onColumnResized = () => {
            saveGridState01()
        }
        return {
            pagingList1,
            saveOrUpdateGridState01,
            saveGridState01,
            updateGridState01,
            onColumnMoved,
            onColumnResized,
            colState,
            headerShow,
            searchData,
            changHeadShow,
            selectHandler,
            saveHandler,
            exportHandler,
            // repairHandler,
            handlerState,
            changHandler,
            pageData,
            dataForm,
            repairsColumns,
            deductionColumns,
            searchHandler,
            selectAwait,
            noticeItem,
            ductItem,
            options,
            loading,
            pagination,
            table,
            localeTextData,
            changePage,
            changeSize,
            total,
            cfsValue,
            defaultColDef,
            gridReady,
            iconText,
            changFlowCode,
            formRef,
            addRepairHandler,
            goodsDep,
            chagneGoodsDep,
            changeWcFarm,
            wcFarm,
            dutyDep,
            changeDutyDep,
            changePicker
        };
    },
    components: { PageTabelLayout,  }
}
</script>

<style  scoped>
.main-container {
    height: 100%;
}

.arco-drawer-header .arco-drawer-title {
    width: 100%;
}

:deep(.arco-select-view-single.arco-select-view-disabled),
:deep(.arco-input-wrapper .arco-input[disabled]) {
    -webkit-text-fill-color: #000 !important;
}

.aInput {
    background: #fff;
    width: 270px;
    border: 1px solid #c9cdd3;
}

:deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
}

.aInputLine {
    border: 1px solid #c9cdd3;
    background: #fff;
}
</style>